import { onUnmounted, onMounted, onActivated, onDeactivated, ref } from "vue";
import { throttle } from "underscore";
export const useScroll = () => {
  const isReachBottom = ref(false);
  const scrollHeight = ref(0);
  const scrollTop = ref(0);
  const scrollListenerHandler = throttle(() => {
    console.log("我执行了");
    scrollHeight.value = document.documentElement.scrollHeight;
    scrollTop.value = document.documentElement.scrollTop;
    const clientHeight = document.documentElement.clientHeight;
    if (clientHeight + scrollTop.value >= scrollHeight.value) {
      isReachBottom.value = true;
    }
  }, 1000);
  onMounted(() => {
    window.addEventListener("scroll", () => {
      scrollListenerHandler();
    });
  });
  onActivated(() => {
    window.addEventListener("scroll", () => {
      scrollListenerHandler();
    });
  });
  onDeactivated(() => {
    window.removeEventListener("scroll", scrollListenerHandler);
  });
  onUnmounted(() => {
    window.removeEventListener("scroll", scrollListenerHandler);
  });
  return {
    isReachBottom,
    scrollTop,
  };
};
